<template>
  <div class='container'>
    <div class="appcontainer"
         v-show="showContainer">
      <Navbar title="服务中心"></Navbar>
      <van-grid :column-num='2'>
        <van-grid-item icon="photo-o"
                       text="在线客服">
          <template #icon>
            <img src="@/assets/images/people.png"
                 alt="">
          </template>
        </van-grid-item>
        <van-grid-item icon="photo-o"
                       text="在线客服">
          <template #icon>
            <img src="@/assets/images/phone.png"
                 alt="">
          </template>
        </van-grid-item>
      </van-grid>
      <van-cell title="热门问题"
                class="hot-question" />
      <van-cell v-for="(item,index) in keys"
                :key='index'
                is-link
                to='/service/questionDetail'
                @click="btn(index)">
        <div slot="title">{{item}}</div>
      </van-cell>
    </div>
    <router-view :title="keys"
                 :contents='contents'
                 :list="list"
                 :index="index"
                 @back='show'> </router-view>
  </div>
</template>

<script>
import { getServiceInfo } from '@/api/service'
export default {
  name: 'service',
  components: {},
  props: {},
  data () {
    return {
      list: {},
      keys: [],
      contents: [],
      index: '',
      showContainer: true
    }
  },
  created () {
    this.getServiceInfo()
  },
  computed: {},
  methods: {
    async getServiceInfo () {
      const { data } = await getServiceInfo()
      this.list = data
      const res = Object.keys(data).filter(item => {
        return item.endsWith('Caption')
      })
      this.keys = res.map((key, index) => {
        return this.keys[index] = data[key]
      });
      const res1 = Object.keys(data).filter(item => {
        return item.endsWith('Content')
      })
      this.contents = res1.map((key, index) => {
        return this.contents[index] = data[key]
      });
    },
    btn (i) {
      this.index = i
      this.showContainer = false
    },
    show (a) {
      this.showContainer = a
    }
  },
}
</script>

<style lang="less" scoped>
.container {
  .van-nav-bar {
    margin-bottom: 0;
  }
  /deep/.van-grid-item__content {
    padding: 20px 8px;
    .van-grid-item__text {
      font-size: 14px;
    }
  }
  .hot-question {
    .van-cell__title {
      padding: 10px 0;
    }
  }
}
</style>
